<template>
  <!-- class控制： splayer-full 全屏， splayer-has-tools 工具/标题栏， splayer-abnormal：视频非正常加载则按钮失效 -->
  <div class="splayer-main" :class="{'splayer-full': full, 'splayer-has-tools': tools, 'splayer-abnormal': loadStatus !== 0}">
    <!-- 上面 标题 + 工具栏 -->
    <div class="splayer-tools" v-if="tools">
      <span class="splayer-title com-ellipsis" :title="cameraData.cameraName">{{cameraData.cameraName}}</span>
      <span class="splayer-opers">
        <!-- 声音按钮 tools.voice 控制按钮展示与否 voice控制声音开关 -->
        <i v-if="tools.voice"
          class="splayer-opers-pl splayer-opers-voice voice-open"
          :class="{'voice-close': !voice}"
          @click="playerVoice(null)"></i>
        <!-- 全屏按钮 -->
        <i v-if="tools.full"
          class="splayer-opers-pl splayer-opers-full"
          :class="{'splayer-opers-notfull': full}"
          @click="playerFullEvent"></i>
        <!-- 关闭按钮, 适用于窗口模式, 触发playerCloseEmit(index) -->
        <i v-if="tools.close && !full"
          class="splayer-opers-close"
          @click="playerCloseEvent"></i>
      </span>
    </div>
    <!-- 播放器 -->
    <div class="splayer-player" @mouseup="playerClickEvent">
      <SimplePlayer
        v-if="playerExist"
        :ref="playerId"
        :player-id="playerId"
        :bind-policy="bindPolicy"
        :notifyMethod="onNotify"
        @load-result="onLoadResult"
        style="width: 100%; height: 100%;"
      />
    </div>
  </div>
</template>

<script>
import { SimplePlayer } from 'client-container'
import MySimplePlayerMixin from '@/components/player/MySimplePlayerMixin'
import { getVideoPlayInfo } from '@/api/armyScreenApi.js'
export default {
  name: 'MySimplePlayer',
  components: { SimplePlayer },
  mixins: [MySimplePlayerMixin],
  data () {
    return {
      // **************** 播放器业务数据/配置定义
    }
  },
  created () {
  },
  methods: {
    // **************** 播放器业务函数
    // 播放器准备完成回调
    playerIsReady () {
      // do something
      this.playerPlayReal()
      // do other things
    },
    // 获取视频参数配置
    getVideoConfig () {
      getVideoPlayInfo().then(res => {
        if (res?.data) {
          const dataConfig = Object.assign({}, this.configData, {
            // isAutoZIndex: false,
            strProtocol: res.data.protocol, // https
            strPlatIp: res.data.platIp, // '10.192.195.201'
            strPlatPort: res.data.platePort, // '443'
            strToken: res.data.strToken, // 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImlzcyI6InhhdXRoLWF1dG...'
            strPlatLanguage: res.data.language, // 'zh_CN'
            // strPlatLanguage: 'zh_CN', // 'zh_CN'
            iMultiRouteId: res.data.imultiRouteId // 1
          })
          this.commonConfig(dataConfig)
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.splayer-main {
  position: relative;
  width: 100%; height: 100%;
  background-color: #333;
  &.splayer-full {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    margin: 0;
  }
  .splayer-player {
    width: 100%; height: 100%;
  }
  .splayer-tools {
    position: absolute; top: 0; left: 0; right: 0;
    height: 2rem;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    > .splayer-title {
      float: left;
      width: 50%; line-height: 2rem;
      padding-left: 0.5rem;
      font-size: 1rem; color: rgba(255, 255, 255, 0.9);
    }
    > .splayer-opers {
      float: right;
      > i {
        position: relative; top: 0.35rem;
        display: inline-block;
        margin-right: 0.5rem;
        width: 1.3rem; height: 1.3rem;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        cursor: pointer;
        &:hover {
          transform: scale(1.1);
        }
      }
      .splayer-opers-close {
        background-image: url('@/assets/images/comm/dialog_tclose.png');
      }
      .splayer-opers-full {
        background-image: url('@/assets/images/comm/player_vi_full.png');
        &.splayer-opers-notfull {
          background-image: url('@/assets/images/comm/player_vi_notfull.png');
        }
      }
      .splayer-opers-voice {
        &.voice-open {
          background-image: url('@/assets/images/comm/player_vi_open.png');
        }
        &.voice-close {
          background-image: url('@/assets/images/comm/player_vi_close.png');
        }
      }
    }
  }
  .splayer-msg {
    position: absolute; top: 50%; left: 0; right: 0;
    padding: 0 50px; margin-top: -40px;
    height: 80px; line-height: 80px;
    font-size: 36px; color: rgba(255, 255, 255, 0.8);
    text-align: center;
  }
  &.splayer-has-tools {
    padding-top: 2rem;
  }
  &.splayer-abnormal {
    .splayer-opers {
      > .splayer-opers-pl {
        opacity: 0.6;
        cursor: default;
      }
    }
  }
}
</style>
